<template>
	<view class="alarm">
		<navBar :title="alarmTitle" left-icon="back" :isBackGround="false" @onLeftIcon="onLeftIcon"></navBar>
		<view class="charts" v-if="chartData.series.length">
			<uni-card title="数据对比" margin="0">
				<view class="content">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</uni-card>
		</view>
		<o-empty v-else style="background-color: #f3f4f6;"></o-empty>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index.vue'
	import {
		getAlarmHistoryData
	} from "@/common/api/api.js"
	import {
		provide
	} from "vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				alarmTitle: "",
				deviceSn: "",
				did: "",
				chartData: {
					categories: [],
					series: []
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					dataLabel: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						labelCount: 10,
						// itemCount: 10,
						rotateLabel: true,
						rotateAngle: 60,
						marginTop: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onLoad(data) {
			this.deviceSn = data.deviceSn
			this.alarmTitle = data.alarmTitle
			this.did = data.id
			console.log('data', data);
			this.getData()
		},
		methods: {
			onLeftIcon() {
				uni.navigateBack()
			},
			async getData() {
				const token = uni.getStorageSync('Token')
				let res = await getAlarmHistoryData({
					token,
					id: this.did
				})
				let datas = [];
				let data = {
					PV1: {
						Apv1: [],
						Vpv1: []
					},
					PV2: {
						Apv2: [],
						Vpv2: []
					},
					PV3: {
						Apv3: [],
						Vpv3: []
					},
					PV4: {
						Apv4: [],
						Vpv4: []
					},
				}
				let data1 = []
				let data2 = []
				let data3 = []
				let data4 = []
				for (let [key, value] of Object.entries(res.data)) {
					datas.push([key, value])
				}
				datas.sort().forEach(item => {
					this.chartData.categories.push(item[0].slice(-8, -3))
					item[1].forEach((e) => {
						switch (e.title) {
							case "PV1":
								data.PV1.Apv1.push(e.current)
								data.PV1.Vpv1.push(e.voltage)
								break;
							case "PV2":
								data.PV2.Apv2.push(e.current)
								data.PV2.Vpv2.push(e.voltage)
								break;
							case "PV3":
								data.PV3.Apv3.push(e.current)
								data.PV3.Vpv3.push(e.voltage)
								break;
							case "PV4":
								data.PV4.Apv4.push(e.current)
								data.PV4.Vpv4.push(e.voltage)
								break;
							default:
								break;
						}
					})
				})
				this.chartData.series = [{
					name: "直流电压PV1(V)",
					data: data.PV1.Vpv1,
					pointShape: "none",
				}, {
					name: "直流电压PV2(V)",
					data: data.PV2.Vpv2,
					pointShape: "none",
				}, {
					name: "直流电压PV3(V)",
					pointShape: "none",
					data: data.PV3.Vpv3
				}, {
					name: "直流电压PV4(V)",
					pointShape: "none",
					data: data.PV4.Vpv4
				}, {
					name: "直流电流PV1(A)",
					pointShape: "none",
					data: data.PV1.Apv1
				}, {
					name: "直流电流PV2(A)",
					pointShape: "none",
					data: data.PV2.Apv2
				}, {
					name: "直流电流PV3(A)",
					pointShape: "none",
					data: data.PV3.Apv3
				}, {
					name: "直流电流PV4(A)",
					pointShape: "none",
					data: data.PV4.Apv4
				}, ]
			}
		}

	}
</script>

<style scoped lang='scss'>
	.alarm {
		.charts {
			margin-top: 20rpx;

			.content {
				width: 100%;
				height: 600rpx;
			}
		}
	}
</style>